import Icon from '@/components/MyIcon'

import styles from './index.module.scss'
import { Tabs } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { channelAction, setActiveIdAction } from '@/store/action/home'
import { useInitState } from '@/utils/hooks'
import Channels from './components/Channels'
import { RootState } from '@/types/store'
import ArticleList from './components/ArticleList'
import { useHistory } from 'react-router-dom'
const Home = () => {
  const dispatch = useDispatch()
  const history = useHistory()
  const { userChannel } = useInitState(channelAction(), 'channelReducer')
  const [showCh, setShowCh] = useState(false)
  const { activeId } = useSelector((state: RootState) => state.channelReducer)
  // 关闭频道弹框
  const closeChannel = () => {
    setShowCh(false)
  }
  // 首页顶部频道选中状态切换
  const changeActiveId = (id: string) => {
    dispatch(setActiveIdAction(+id))
  }
  return (
    <div className={styles.root}>
      <Tabs
        className="tabs"
        activeLineMode="fixed"
        activeKey={activeId + ''}
        onChange={changeActiveId}
      >
        {userChannel.map((v) => {
          return (
            <Tabs.Tab title={v.name} key={v.id}>
              <ArticleList id={v.id}></ArticleList>
            </Tabs.Tab>
          )
        })}
      </Tabs>
      <div className="tabs-opration">
        <Icon
          onClick={() => {
            history.push('/search')
          }}
          type="iconbtn_search"
        />
        <Icon onClick={() => setShowCh(true)} type="iconbtn_channel" />
      </div>

      <Channels visible={showCh} close={closeChannel}></Channels>
    </div>
  )
}

export default Home
